<template>
  <el-dialog
    title="快速导入"
    :visible.sync="quickShow"
    :destroy-on-close="true"
    :append-to-body="true"
    width="45%"
    @close="onClose"
    class="edit-main"
  >
    <el-form
      ref="formData"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="号码：">
        <el-tag
          style="width: 30%"
          :key="tag + index"
          v-for="(tag, index) in dynamicTags"
          closable
          :disable-transitions="false"
          @close="handleTagClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          style="width: 30%"
          maxlength="11"
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button
          v-else
          class="button-new-tag"
          style="width: 30%"
          size="small"
          @click="showInput"
          >添加号码</el-button
        >
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit">提 交</el-button>
      <el-button @click="onClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { importTel } from "@/api/taskManagement/taskList.js";

export default {
  name: "addTaskDialog",
  props: {
    quickImportShow: {
      type: Boolean,
      default: false,
    },
    questionText: {
      type: String,
      default: "",
    },
    taskId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      tableData: [], //表格数据
      pagination: {
        pageNum: 1,
        pageSize: 10,
      },
      formData: {
        questionText: "",
      },
      voiceTypeList: [],
      rules: {
        questionText: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
      },
      total: 0,
      quickShow: false,
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
    };
  },

  watch: {
    quickImportShow: {
      handler(val) {
        if (val) {
          this.quickShow = val;
        }
      },
      immediate: true,
    },
    questionText: {
      handler(val) {
        if (val) {
          this.formData.questionText = val;
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 保存
    async onSubmit() {
      if (!this.dynamicTags.length) {
        this.$message.warning("请添加号码！");
        return;
      }
      const params = {
        customerTelList: this.dynamicTags,
        taskId: this.taskId,
      };
      const { code, msg } = await importTel(params);
      if (code === 200) {
        this.$message.success(msg);
        this.onClose();
      }
    },
    handleTagClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    onClose() {
      this.quickShow = false;
      this.dynamicTags = [];
      this.$emit("onCloseQuickImport");
    },
  },
};
</script>

<style lang="scss" scoped>
.edit-main {
  ::v-deep .el-textarea__inner {
    height: 150px;
  }
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
